<template>
  <div>
    <div class="wrapper">这个是商家管理移动端</div>
    <hr />
    <table>
      <thead>
      <tr>
        <th
          v-for="(th, thi) in skuLabel"
          :key="thi"
          :colspan="th.colspan"
          :rowspan="th.rowspan"
        >
          {{th.name}}
        </th>
      </tr>
      <tr>
        <th
          v-for="(th, thi) in skuName"
          :key="thi"
        >
          {{th}}
        </th>
      </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in skuList"
          :key="index"
        >
          <td
            v-for="(o, i) in item.sku"
            :key="i"
          >
            {{ o.value }}
          </td>
          <td>{{ item.image }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.cost }}</td>
          <td>{{ item.stock }}</td>
          <td>{{ item.sort }}</td>
          <td>{{ item.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { calcSku, sortSku } from '@/util/sku'
export default {
  computed: {
    skuName() {
      return [
        '颜色',
        '尺码',
        '大小',
      ]
    },
    skuLabel() {
      return [
        {
          name: '商品规格',
          colspan: this.sku.length,
          rowspan: this.sku.length > 0 ? 1 : 2
        },
        {
          name: '图片',
          rowspan: 2
        },
        {
          name: '价格',
          rowspan: 2
        },
        {
          name: '成本',
          rowspan: 2
        },
        {
          name: '库存',
          rowspan: 2
        },
        {
          name: '排序',
          rowspan: 2
        },
        {
          name: '状态',
          rowspan: 2
        }
      ]
    },
    skuList() {
      const rs = sortSku(this.sku)
      console.log(rs)
      return rs.map(item => {
        return {
          sku: item,
          image: '',
          price: 0,
          cost: 0,
          stock: 0,
          sort: 0,
          status: 1
        }
      })
    }
  },
  data() {
    return {
      sku: [
        [
          { value: '绿色' },
          { value: '白色' },
          { value: '红色' },
        ],
        [
          { value: 'S'},
          { value: 'M'},
          { value: 'L'},
          // { value: 'XL'},
          // { value: 'XXL'},
        ],
        [
          { value: '大' },
          { value: '中' },
          { value: '小' },
        ],
        // [
        //   { value: '李宁' },
        //   { value: '特步' },
        //   { value: '安踏' },
        // ]
      ],
      list: []
    }
  },
  created() {

  }
}
</script>

<style scoped lang="stylus">
td, th {
  border 1px solid #cbcbcb
  padding 5px 10px
}
</style>
